<template>
	<view class="container">
		<view class="header">
			<text class="title">房租详情</text>
			<text class="subtitle">{{ building }}{{ unit }}{{ roomNumber }}{{ room }}</text>
		</view>

		<view class="info-card">
			<view class="info-item">
				<text class="label">房间状态：</text>
				<text class="value">{{ roomStatus }}</text>
			</view>
			<view class="info-item">
				<text class="label">月租金：</text>
				<text class="value">¥{{ rentAmount }}</text>
			</view>
			<view class="info-item">
				<text class="label">到期日：</text>
				<text class="value">{{ dueDate }}</text>
			</view>
			<view class="info-item">
				<text class="label">最后一次付款日期：</text>
				<text class="value">{{ lastPaymentDate }}</text>
			</view>
		</view>

		<view class="action-buttons">
			<button class="btn-wide" @click="payRent">支付房租</button>
			<button class="btn-wide" @click="repairRegister">维修登记</button>
			<button @click="checkIn">入住</button>
			<button @click="changeRoom">换房</button>
			<button @click="checkOut">退房</button>
			<button @click="refundDeposit">退押</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			building: '',
			unit: '',
			roomNumber: '',
			room: '',
			roomStatus: '闲置', // 房间状态：在租、欠费、闲置
			rentAmount: 2500, // 月租金
			dueDate: '', // 到期日
			lastPaymentDate: '' // 最后一次付款日期
		}
	},
	onLoad(options) {
		// 从路由参数中获取房间信息
		this.building = options.building || '5号楼';
		this.unit = options.unit || '3单元';
		this.roomNumber = options.roomNumber || '502';
		this.room = options.room || '北卧';
	},
	onShow() {
		// 监听数据更新事件
		uni.$on('updateRoomData', this.updateRoomData);
	},
	onUnload() {
		// 移除事件监听
		uni.$off('updateRoomData', this.updateRoomData);
	},
	methods: {
		updateRoomData(data) {
			this.roomStatus = data.roomStatus;
			this.dueDate = data.dueDate;
			this.lastPaymentDate = data.lastPaymentDate;
		},
		payRent() {
			uni.navigateTo({
				url: '/pages/pay/pay'
			});
		},
		repairRegister() {
			uni.navigateTo({
				url: '/pages/repair/repair'
			});
		},
		checkIn() {
			if (this.roomStatus === '在租' || this.roomStatus === '欠费') {
				uni.showModal({
					title: '提示',
					content: '此房间有人在租，请联系管理员19661701528',
					showCancel: false
				});
			} else if (this.roomStatus === '闲置') {
				uni.navigateTo({
					url: `/pages/pay/pay?rentAmount=${this.rentAmount}`
				});
			}
		},
		changeRoom() {
			if (this.roomStatus === '欠费') {
				uni.showModal({
					title: '提示',
					content: '请清算当前房间房租后再点击换房',
					showCancel: false
				});
			} else if (this.roomStatus === '在租') {
				uni.navigateTo({
					url: `/pages/changeRoom/changeRoom?building=${this.building}&unit=${this.unit}&roomNumber=${this.roomNumber}&room=${this.room}&dueDate=${this.dueDate}&rentAmount=${this.rentAmount}`
				});
			} else {
				uni.navigateTo({
					url: '/pages/changeRoom/changeRoom'
				});
			}
		},
		checkOut() {
			uni.showToast({
				title: '退房',
				icon: 'none'
			});
		},
		refundDeposit() {
			uni.showToast({
				title: '退押',
				icon: 'none'
			});
		}
	}
}
</script>

<style>
.container {
	padding: 40rpx;
}

.header {
	margin-bottom: 40rpx;
}

.title {
	font-size: 44rpx;
	font-weight: 500;
	color: #333;
	display: block;
	text-align: center;
}

.subtitle {
	font-size: 36rpx;
	color: #666;
	display: block;
	text-align: center;
	margin-top: 20rpx;
}

.info-card {
	background: #fff;
	border-radius: 16rpx;
	padding: 40rpx;
	margin-bottom: 40rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.info-item {
	display: flex;
	justify-content: space-between;
	margin-bottom: 30rpx;
}

.label {
	font-size: 32rpx;
	color: #666;
}

.value {
	font-size: 32rpx;
	color: #333;
	font-weight: 500;
}

.action-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
}

button {
	flex: 1 1 45%;
	background-color: #07c160;
	color: #fff;
	font-size: 32rpx;
	padding: 20rpx 0;
	border-radius: 8rpx;
	border: none;
}

.btn-wide {
	flex: 1 1 100%;
}

button:active {
	background-color: #06ad56;
	transform: scale(0.98);
}
</style> 